<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wshare 验证码通知</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f7fa;
        }

        .container {
            width: 90%;
            max-width: 500px;
            margin: 20px auto;
            padding: 30px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid #e8e8e8;
        }

        .header {
            text-align: center;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
            margin-bottom: 20px;
        }

        .logo {
            width: 120px;
            margin-bottom: 10px;
        }

        .header-title {
            color: #333;
            font-size: 18px;
            font-weight: 500;
        }

        .content {
            color: #444;
            line-height: 1.6;
        }

        .content p {
            margin: 10px 0;
        }

        .code-container {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            margin: 25px 0;
        }

        .code {
            font-size: 28px;
            font-weight: bold;
            color: #ff4d4f;
            letter-spacing: 4px;
            display: block;
        }

        .code-label {
            color: #888;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .footer {
            margin-top: 30px;
            padding: 30px 20px 20px;
            border-top: 1px solid #f0f0f0;
            color: #999;
            font-size: 13px;
            line-height: 1.8;
            text-align: center;
        }

        .footer p {
            margin: 5px 0;
        }

        .divider {
            height: 1px;
            background-color: #f0f0f0;
            margin: 15px 0;
        }

        .highlight {
            color: #ff4d4f;
            font-weight: 500;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <img class="logo" src="https://gitee.com/lol1296/wshare/raw/master/src/main/resources/static/logo.png" alt="Wshare Logo">
        <div class="header-title">Wshare安全邮件</div>
    </div>

    <div class="content">
        <p>尊敬的用户，您正在申请以下操作：</p>
        <p class="highlight">账户安全验证</p>

        <div class="code-container">
            <div class="code-label">您的验证码是：</div>
            <div class="code">{{code}}</div>
        </div>

        <p>验证码有效期为 <span class="highlight">5分钟</span>，请尽快使用。</p>
        <p>为保障您的账户安全，请勿将验证码泄露给他人。</p>
    </div>

    <div class="footer">
        <div>如果您并非本人操作，建议立即登录账户检查安全状态。</div>
        <div>此邮件为系统自动发送，无需回复</div>
        <div>© 2025 Wshare - 版权所有</div>
    </div>
</div>
</body>
</html>